<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>12_指令_内置指令</title>
    <style>
      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <!--
常用内置指令
  v-text : 更新元素的 textContent
  v-html : 更新元素的 innerHTML
  v-if : 如果为true, 当前标签才会输出到页面
  v-else: 如果为false, 当前标签才会输出到页面
  v-show : 通过控制display样式来控制显示/隐藏
  v-for : 遍历数组/对象
  v-on : 绑定事件监听, 一般简写为@
  v-bind : 强制绑定解析表达式, 可以省略v-bind
  v-model : 双向数据绑定
  ref : 为某个元素注册一个唯一标识, vue对象通过$els属性访问这个元素对象
  v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }
  v-pre: 跳过这个元素和它的子元素的编译过程。
  v-once: 只渲染元素和组件一次。
-->
    <div id="example">
      <p v-cloak>{{msg}}</p>
      <p v-text="msg" ref="p"></p>
      <!-- xss crsf -->
      <p v-html="msg"></p>
      <p v-pre>{{msg}}</p>
      <p v-once>{{num}}</p>
      <!-- 给普通元素绑定ref，获取到是真实DOM元素，给组件绑定ref，获取到是组件实例对象 -->
      <button @click="num++" ref="btn">按钮</button>
      <!-- <A ref="a"/> -->
    </div>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el: "#example",
        data: {
          msg: "<span>hello atguigu</span>",
          num: 0,
        },
        mounted() {
          console.log(this.$refs.btn);
          console.log(this.$refs.p);
        },
      });
    </script>
  </body>
</html>
